﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2>商品列表视图</h2>
<h5> <a href="/product/addproduct">添加商品</a> </h5>

商品名称:
<input type="text" id="Name" value="" />

开始时间:
<input type="date" id="beginTime" value="" />
结束时间:
<input type="date" id="endTime" value="" />

<input type="button" id="search" onclick="FenYe()" value="搜索" />

<table class="layui-table">
    <tr>
        <td>编码</td>
        <td>商品名称</td>
        <td>商品图片</td>
        <td>描述</td>
        <td>价格</td>
        <td>库存</td>
        <td>状态</td>
        <td>积分</td>
        <td>操作</td>
    </tr>
    <tbody id="data"></tbody>
</table>
<div id="demo-laypage-all"></div>  @* layui分页组件 *@
<script>

    function FenYe() {
        layui.use(function () {
            var laypage = layui.laypage;

            ShowList();
            // 完整显示
            laypage.render({
                elem: 'demo-laypage-all', // 元素 id
                count: count, // 数据总数
                limits:[2,3,4,5,6],
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                jump: function (obj) {
                    console.log(obj);

                    index = obj.curr;
                    size = obj.limit;
                    ShowList();//刷新页面数据
                }
            });
        });
    }

    $(function () {
        FenYe();
    }); //就绪函数

    //全局变量
    var index = 1;
    var size = 3;
    var count = 0;

 
        function ShowList() {
            var Name = $("#Name").val();

            $.ajax({
                url: 'https://localhost:7061/api/Product/GetProductPages?index=' + index + '&size=' + size + '&Name='+Name+'&beginTime=&endTime=',
                type: 'get',
                async: false,
                success: function (res) {

                    console.log(res);
                    var tr = '';

                    $(res.data).each(function (i, obj) {
                        tr += ` <tr>
                                <td>${obj.code}</td>
                                <td>${obj.name}</td>
                                <td> <img src="${obj.imgUrl}">  </td>
                                <td>${obj.description}</td>
                                <td>${obj.price}</td>
                                 <td>${obj.stock}</td>
                                 <td>${obj.status}</td>
                                 <td>${obj.needJifen}</td>
                                    <td>
                                        <input type="button" value="编辑" onclick="edit(${obj.id})" />
                                        <input type="button" value="兑换" onclick="duihuan(${obj.id})" />
                                    </td>
                                    

                            </tr>`;
                    });
                    $("#data").html(tr);
                    count = res.count;
                }

            });
        }

    function edit(id) { 
        localStorage["id"] = id;
        location.href = "/product/EditProduct";
    }

    function duihuan(id) { 
    
        alert("您即将要兑换的商品id是:" + id);
        // id = 1000000;
        var productid = id;
        var userName = Cookies.get("username");

        $.ajax({
            url: 'https://localhost:7061/api/Product/DuiHuan?userName='+userName+'&productId='+id,
            type:'post',
            contentType:'application/json',
            success: function (res) {
                alert(res);
                if (res == -1) {
                    alert("商品不存在");
                } if (res == -2) {
                    alert("商品下架了");
                } if (res == -3) {
                    alert("商品库存不足");
                } if (res == -4) {
                    alert("登录用户不存在");
                } if (res == -5) {
                    alert("您的积分不足");
                } if (res == -7) {
                    alert("网络原因");
                } if (res == 1) {
                    alert("恭喜您,兑换成功!");
                }
            }
        } );
    }

</script>